<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#main {
				width: 200px;
				border: 1px solid green;
				margin: 0 auto;
				text-align: center;
			}
			input {
				font-size: 25px;
			}
			
			#div {
				min-height: 100px;
				/*border: 1px solid #000;*/
			}
		</style>
	</head>

	<body>
		<div id="main">
			<input type="button" name="" id="" value="展开" onclick="zhankai();" />
			<input type="button" name="" id="" value="收缩" onclick="shousuo();" />
			<hr />
			<div id="div">
			</div>
		</div>

		<script type="text/javascript">
			var str = "深圳钉子户坚守十几年成孤岛 曾拒2000万补偿.据中国网报道，2016年6月13日，广东深圳，深圳龙华新区深圳北站附近，一栋墙体裸露红砖、显得破旧的七层小楼，孤零零地伫立在空地上，犹如一座孤岛，与远处的高楼形成巨大的反差.";
			
			var div = document.getElementById('div');
			var length = str.length;
			var count = 0;
			function zhankai() {
				var timer = setInterval(function() {
					count++;
					div.innerHTML = str.slice(0,count);
					if (count === length) {
						clearInterval(timer);
					}
				},10);
			}

			function shousuo() {
				var timer = setInterval(function() {
					length--;
					div.innerHTML = str.slice(0, length);
					if (length === 0) {
						clearInterval(timer);
					}
				}, 100);
			}
		</script>
	</body>

</html>